<template>
    <div class="sell-detail-content">
        <div class="sellLeftCon">
            <div class="sell-detail-left-bigimg">
                <img-box :imgs="[dtData.nftImage]"/>
                <div class="sell-status yugao" v-if="dtData.sellStatus==0"><!---预告-->
                    <i class="iconfont icon-shijian"></i>
                    {{text9}} {{dtData.startTime || '--'}}
                </div>
                <div class="sell-status jinxingzhong" v-else-if="dtData.sellStatus==10 && dtData.sellModel==1"><!---拍卖中-->
                    <i class="iconfont icon-shijian"></i>
                    {{text10}} {{dtData.endTime || '--'}}
                </div>
                <div class="sell-status jinxingzhong"  v-else-if="dtData.sellStatus==10 && dtData.sellModel==0"><!---出售中-->
                    <i class="iconfont icon-shijian"></i>
                   {{text11}}
                    <!-- End {{dtData.endTime || '--'}} -->
                </div>
                <div class="sell-status jieshu" v-else-if="dtData.sellStatus==20 && dtData.sellModel==0"><!---直售成功\结束-->
                    <template v-if="sellMyType==3"><!---我发起的直售-->
                        <span v-if="dtData.winAddress && userInfo.walletAddress.toLowerCase()!=dtData.winAddress.toLowerCase()" v-t="'sell.text12'">Successful sale</span>
                        <span v-else v-t="'sell.text13'">End of sale</span>
                    </template>
                    <template v-else> <!---我参与的直售-->
                        <span v-if="dtData.winAddress && userInfo.walletAddress.toLowerCase()==dtData.winAddress.toLowerCase()" v-t="'sell.text14'">Purchase succeeded</span>
                        <span v-else v-t="'sell.text15'">Purchase failed</span>
                    </template>
                </div>
                <div class="sell-status jieshu" v-else-if="dtData.sellStatus==20 && dtData.sellModel==1"><!---拍卖成功\结束-->
                    <template v-if="sellMyType==1"><!---我发起的拍卖-->
                        <span v-if="dtData.winAddress && userInfo.walletAddress.toLowerCase()!=dtData.winAddress.toLowerCase()" v-t="'sell.text16'">Successful auction</span>
                        <span v-else v-t="'sell.text17'">End of auction</span>
                    </template>
                    <template v-else> <!---我参与的拍卖-->
                        <span v-if="dtData.winAddress && userInfo.walletAddress.toLowerCase()==dtData.winAddress.toLowerCase()" v-t="'sell.text16'">Successful auction</span>
                        <span v-else v-t="'sell.text17'">End of auction</span>
                    </template>
                </div>
                <div class="sell-status jieshu" v-else-if="dtData.sellStatus==30 && dtData.sellModel==1" v-t="'sell.text18'"><!---拍卖失败-->
                    Auction Failure
                </div>
            </div>
            <div class="redeemable-view" @click="btnGoods" v-if="dtData.nftType==8" v-t="'sell.text19'">View Redeemable Items</div>
            <!-- <div class="sell-dt-tips" v-if="dtData.sellStatus==20 && dtData.sellModel==1">
                <template v-if="userInfo.walletAddress==dtData.ownerAddress">
                    <img src="/images/success.png"/>
                    <p>Congratulations!<br/> You won the auction</p>
                </template>
            </div> -->
        </div>
        <div class="sellRightCon">
                  <div class="scoll-view">
                        <div class="stitle">{{dtData.nftName}}</div>
                        <div class="introduce">{{dtData.nftDescription}}</div>
                        <div class="price" v-if="dtData.transactionEthPrice">
                            <div><img src="/images/bicon1.png" alt=""></div> 
                            <b>{{dtData.transactionEthPrice.decimalFourString}}</b>
                            （${{dtData.transactionUsdPrice.decimalTwoString}}）
                        </div>
                        <div class="chainInfoBox">
                            <div class="user-view"> 
                                <!-- v-if="chainInfo" -->
                                <!-- nft 类型 1:城市地标,2:广告位,3:道具,4;游戏,5:其它,6:世界杯卡片,7:导入nft,8:应援	 -->
                                    <div class="item" :style="{width:(dtData.nftType==1||dtData.nftType==2||dtData.nftType==3)?'48%':'100%'}">
                                        <div class="title" v-t="'sell.text1'">TITLE HOLDING</div>
                                        <div class="dtname">{{dtData.ownerName}}</div>
                                    </div>
                                    <!-- <div class="line"></div> -->
                                    <div class="item on" v-if="(dtData.nftType==1||dtData.nftType==2||dtData.nftType==3)" @click="btnUrl(dtData)"  :style="{width:'48%'}">
                                        {{dtData.nftType==1?'Landmark':(dtData.nftType==8?'Goods':(dtData.nftType==3?'Prop':'Other'))}}
                                    </div>
                            </div>
                            <chain-info :styleType='2' :showName="false" :info="dtData"/>
                        </div>
                        <div class="fg"></div>
                    
                     <!-- <div class="btn-setUp" v-if="exchangedType=='no'"  @click="btnExchange">Exchange</div> -->
                     <!-- <look-self  @refresh='getDetail'/> -->
                      <div v-if="dtData.sellRecordId">
                        <look-self v-if="userInfo.walletAddress.toLowerCase()==dtData.ownerAddress.toLowerCase() || detailType==2" @refresh='getDetail'/>
                        <look-other v-else @refresh='getDetail'/>
                    </div> 
                </div>
                
        </div>
    </div>
</template>

<script>
import { reactive,toRefs,getCurrentInstance,onMounted,computed } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import {CheckboxGroup as vanCheckboxGroup} from 'vant'
import Title from '@/components/title.vue'
import twoTitle from '@/components/twoTitle.vue'
import imgBox from '@/components/imgBox.vue'
import chainInfo from '@/components/chainInfo.vue'
import uvPvVisits from '@/components/uvPvVisits.vue'
import myButton from '@/components/myButton.vue'
//import bidRecord from './bidRecord.vue'
import cutBorderBox from '@/components/cutBorderBox.vue' 
import myDailog from '@/components/myDailog.vue' 
import Success from '@/components/success.vue' 
import myDatetimePicker from '@/components/myDatetimePicker.vue'
//import detailPublic from './detailPublic.vue'
import lookSelf from './lookSelf.vue'
import lookOther from './lookOther.vue'
import { toast,H5CallAPPFuction } from '@/utils/common'
import { useI18n } from 'vue-i18n'

export default {
    components:{
       Title,
       twoTitle,
       imgBox,
       vanCheckboxGroup,
       myDailog,
       chainInfo,
       uvPvVisits,
       //detailPublic,
       myButton,
       //bidRecord,
       cutBorderBox,
       Success,
       //myDatetimePicker,
       lookSelf,
       lookOther
    },
    props:{
        detail:Object,
        id:Number,
        detailType:''
    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()
        const {t} = useI18n()

        const state = reactive({
            userInfo:computed(()=>store.state.base.userInfo),
            //showFlag:false,
            showFlag2:false,
            showFlag3:false,
            showtype:1, // 1显示出售方式弹窗，2显示一口价弹窗，3显示一口价授权弹窗，4显示拍卖弹窗，5显示成功弹窗，
            hbtypes:[],
            auStartTime:'2021-01-02 09:40',
            auEndTime:'',
            dtData:computed(()=>store.state.sell.nftdDetail),
            sellMyType:computed(()=>store.state.sell.sellMyType), //  1我发起的拍卖，2我参与的拍卖，3我发起的值售，4我购买的直售
            text9:t('sell.text9'),
            text10:t('sell.text10'),
            text11:t('sell.text11'),
        })
        
        
        onMounted(()=>{
            getDetail()
        })

        const getDetail = ()=>{
            store.commit('sell/set_nftdDetail',{}) // 清空
            if(props.id){
                store.dispatch('sell/get_sell_detail',{
                    sellRecordId:props.id
                }).then(res =>{
                    if(!res.success){
                        return toast('Failed To Get Detailed Data')
                    }
                })
            }else{
                store.commit('sell/set_nftdDetail',props.detail)
            }
        }
         const btnUrl = (item)=>{
             if(state.dtData.nftType==8){
                router.push({path:'/goods/'+state.dtData.relationId})
            }
             if(state.dtData.nftType==3){
                router.push({path:'/ad/detailProp',query:{arPropId:state.dtData.relationId,propTemplateId:null,exchanged:null}})
            }
            if(state.dtData.nftType==1){
                  try {
                  H5CallAPPFuction('showLandmarkDetial',state.dtData.relationId) 
                } catch (error) {
                    console.log('调用app失败')
                }
            }
               
        }
        const btnNFT = (id)=>{
                router.push('/ad/detailProp/'+id)
        }
        const btnGoods = ()=>{
                router.push('/goods/'+state.dtData.relationId)
        }
        
        return{
            ...toRefs(state),
            getDetail,
            btnNFT,
            btnGoods,
            btnUrl
        }
    }
}
</script>

<style lang="scss" scoped>
    .sell-detail-content{
        display: flex;
        width: 100%;
        height: 100%;
        line-height: normal;
        font-size: 28px;
        font-weight: 500;
        color: #FFFFFF;
        overflow: hidden;
        overflow-x: auto;
        padding: 20px 20px 30px 20px;
        font-family: Poppins-Medium, Poppins;
        font-weight: 500;
        color: #FFFFFF;
        line-height: normal;
        font-size: 28px;
        .sellLeftCon{
            display: flex;
            flex-flow: column;
            width: 530px;
            height: 100%;
            background-image: url(/images/adRelease/box-bg.png);
            background-position: center;
            background-size: 100% 100%;
            background-repeat: no-repeat;
            padding:30px;
            position: relative;
            .redeemable-view{
                color: #67F8FF;
                 font-size: 28px;
                 text-align: center;
                 padding-top:30px;
            }
            .sell-detail-left-bigimg{
                position: relative;
                flex: 1;
                width: 100%;
                z-index: 10;
                .sell-status{
                    display: flex;
                    align-items: center;
                    position: absolute;
                    z-index: 10;
                    width: 100%;
                    height: 70px;
                    left: 0;
                    bottom: 0;
                    background: linear-gradient(225deg, #FF3300 0%, #841A00 100%);
                    padding:0 20px;
                    font-size:24px;
                    &.yugao{
                         background: linear-gradient(225deg, #FF3300 0%, #841A00 100%);
                    }
                    &.chushouzhong,.jinxingzhong{
                        background: linear-gradient(225deg, #00A3FF 0%, #004AD9 100%);
                    }
                    &.jieshu{
                        background: linear-gradient(225deg, #B1B1B1 0%, #474747 100%);
                       // background: rgba(0,0,0,0.7);
                    }
                    &.paimaizhong{
                        background: linear-gradient(225deg, #00A3FF 0%, #004AD9 100%);
                    }
                    i{
                        font-weight: bold;
                        margin: 0 5px 0 0;
                    }
                }
            }
            .sell-dt-tips{
                display: flex;
                font-family: Poppins-Medium, Poppins;
                font-weight: 500;
                color: #67F8FF;
                line-height: normal;
                text-align: center;
                font-size: 28px;
                padding: 20px 0 10px 0;
                align-items: center;
                justify-content: center;
                img{
                    display: block;
                    height: 60px;
                }
                p{
                    text-align: left;
                    padding: 0 0 0 10px;
                }
            }
        }
        .sellRightCon{
            flex: 1;
            height: 100%;
            padding:30px;
            max-width:55%;
            font-family: Poppins-Medium, Poppins;
            font-weight: 500;
            color: #ffffff80;
            line-height: normal;
            font-size: 22px;
            background-image: url(/images/adRelease/sbg.png);
            background-position: center;
            background-size: 100% 100%;
            background-repeat: no-repeat;
            position: relative;
            margin-left:30px;
            .scoll-view{
                overflow: hidden;
                overflow-y: auto;
                -webkit-overflow-scrolling:touch;
                height:100%;
                width:100%;
            }
            .fg{
                height: 20px;
            }
            .stitle{
                font-size: 28px;
                 color: #ffffff;
            }
            .introduce{
                color: #779EC8;
                padding: 10px 0 0 0;
            }
            .price{
                display: flex;
                font-size: 26px;
                align-items: center;
                padding: 20px 0 0 0;
                color: #5781BE;
                img{
                    display: block;
                    float: left;
                    width: 20px;
                    margin: 3px 10px 0 0;
                }
                b{
                    font-size: 36px;
                    font-weight: 500;
                    color: #fff;
                }
            }
            .chainInfoBox{
                // background: rgba(103,248,255,0.1);
                margin: 20px 0 0 0;
                border-top:1px solid #ffffff15;
                border-bottom:1px solid #ffffff15;
                padding:10px 0;
             .user-view{
                display: flex;
                justify-content: space-between;
                position: relative;
                margin-top:10px;
                margin-bottom:10px;
                .line{
                    position: absolute;
                    width:1px;
                    height:60px;
                    left:50%;
                    top:50%;
                    margin-left:-5px;
                    margin-top:-30px;
                }
                .item{
                    width:48%;
                     padding: 5px 0;
                    text-align: center;
                      background-color: #67F8FF50;
                   // background: rgba(103,248,255,0.2000);
                    border:1px solid #67F8FF;
                }.on{
                    padding-top:20px;
                    color:#67F8FF;
                }
                .title{
                    font-size:20px;
                    color:#ffffff50;
                }
                .dtname{
                    font-size:24px;
                    color:#67F8FF;
                }
        }
            }
            .sell-visits-box{
                padding:20px 0 0 0;
            }
        }
    }
</style>
<style lang="scss">
    .ykjbox .van-checkbox__label{
        font-family: Poppins-Medium, Poppins;
        font-weight: 500;
        color: #fff;
        font-size: 28px;
    }
</style>